import React, { Component } from 'react';
import {
  StyleSheet, Text, View, TouchableOpacity,
  Image,
} from "react-native";
import { GLOBAL } from '../../config/global';
import { style } from '../../theme/style';

import { NavigationEvents } from 'react-navigation';
import { Common } from '../../component/common/Common.js';

const arrowShiBie = require('../../imgs/renlianshibie.png');
const arrowZhenWen = require('../../imgs/zhiwen.png');
const logoIcon = require('../../imgs/logoIng.png');


const scale = GLOBAL.SCALE;

export class AuthenticationPagewww extends Component {
  static navigationOptions = ({ navigation, navigationOptions }) => {
    return {
      headerTitle: '',
      headerTintColor: style.color.white,
      headerLeft: null,
      headerRight: null,
      headerStyle: {  // 头部整体样式 
        elevation: 0,
        borderBottomWidth: 0,
        backgroundColor: '#fff',
      },
      headerTitleStyle: {
        flex: 1,
        textAlign: 'center'
      }
    }
  };
  constructor(props) {
    super(props)
  }

  render () {
    return (
      <View>

        <View style={styles.itemBox}>
          <Image style={styles.itemBoxIcon} source={logoIcon} />
        </View>

        <View style={styles.flexNum}>
          <View style={styles.flexItem}>
            <Image style={styles.flexItemIcon} source={arrowZhenWen} />
          </View>
          <View style={styles.flexItem}>
            <Text style={styles.flexItemTetx}>点击进行指纹解锁</Text>
          </View>
        </View>

        <View style={styles.flexBut}>
          <Text style={styles.flexButText}>登入其它账户</Text>
        </View>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  itemBox: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  itemBoxIcon: {
    width: 150 * scale,
    height: 150 * scale,
  },
  flexNum: {
    // marginTop: 120 * scale,
    // flex: 1,
    flex: 1,
  },
  flexItem: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  flexItemIcon: {
    width: 80 * scale,
    height: 80 * scale,
  },
  flexItemTetx: {
    paddingTop: 30 * scale,
    // color: '',
    // flexDirection: 'row',
    // justifyContent: 'center',
  },
  flexBut: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
})